<template>
    <div class="customerList">
        <!--搜索条件-->
        <search></search>
        <!-- 分割线 -->
        <div class="sloid"></div>
        <!-- 功能键 -->
        <div class="mybtn">
            <el-button type="primary" size="medium">导出</el-button>
            <el-button type="primary" size="medium">导入</el-button>
            <el-button type="primary" size="medium" @click="establishFn()">创建</el-button>
        </div>
        <!-- 客户列表组件 -->
        <!-- :tableData="listData"动态绑定将listData赋值给tableData -->
        <customer-list-com :tableData="listData"></customer-list-com>
    </div>
</template>

<script>
import myhead from '../../../components/myhead.vue'
import Search from '../search/search.vue'
import CustomerListCom from './customerList-com.vue'
// 请求数据
import {reqAccountInfo} from '@/request/customer'
export default {
    components: { myhead, CustomerListCom, Search },
    data() {
        return {
            input1: '',
            input2: '',
            value:'',
            listData:[],
            options: [{value: '选项1', label: '顺丰速运'},
                      {value: '选项2', label: '圆通速递'}, 
                      {value: '选项3', label: '龙邦速度'},
                      {value: '选项4', label: '中通快递'}, 
                      {value: '选项5', label: '申通快递'},
                      {value: '选项6', label: '百世快递'},
                      {value: '选项7', label: '韵达快递'}],
        }
    },
    mounted() {
          // 页面加载的时候渲染数据
        reqAccountInfo().then(res=>{
            this.listData = res;
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })
    },
    methods:{
        // 点击创建去创建客户
        establishFn(){
            this.$router.push({path:'/establish'})
        },
        // 点击清除搜索清空搜索neir
        // myclear(){
      
        // }
    }
}
</script>

<style lang="less" scoped>
.customerList{ 
    background-color: #fff;
    /deep/.el-table th.is-leaf{
        font-size: 14px;
        text-align: center;
        }
    /deep/.el-table .cell {
        font-size: 12px;
        }
    /* 头部样式 */
    .myhead{
        // background-color: pink;
        height: 50px;
        line-height: 50px;
        box-shadow:0px 1px 3px 2px rgb(241, 240, 240);
    }
    // 搜索条件
    .iflist{
        font-weight:600;
        display: flex;
        margin: 35px auto 25px auto;
        padding-left: 42px;
        font-size: 14px;
        /deep/.el-input__inner{
            width: 180px;
            margin-left: 5px;
        }
        /deep/.el-input{
             width:auto ;
             margin-right:25px;
             font-size: 14px;
        } 
        // 操作
        .high{
            margin-left:240px;
             font-size: 14px;
            a{
                color:#409eff;
                margin-right:10px;
            }
            button{
                margin-right:15px;
            }
            // 高级搜索
            .el-dropdown-link {
                cursor: pointer;
                color: black;
                 font-size: 14px;
            }
            .el-icon-arrow-down {
                font-size: 14px;
            }
        }
    }
    .sloid{
        border-bottom: 1px solid rgb(214, 216, 219);
        width: 94%;
        margin: 0px 3%;
    }
    // 功能键
    .mybtn{
        padding-right: 50px;
        // background-color: pink;
        text-align: right;
        margin-top:20px;
        margin-bottom: 20px;
    }
}
</style>